<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>欢迎首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link id="link_" rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link class="link_" rel="stylesheet" href="../../layuiadmin/layui/css/admin.css" media="all">
    <link class="link_" rel="stylesheet" href="../../css/custom.css" media="all">
    <link class="link_" rel="stylesheet" href="../../css/select2.css" media="all">
    <!-- <script>
        top.layui.each(top.layui.$('link'), function (index, item) {
            if (item.href.includes("layui.css") || item.href.includes("admin.css") || item.href.includes("custom.css")) {
                var oLi = document.createElement("link");
                oLi.rel = "stylesheet", oLi.href = decodeURIComponent(item.href), oLi.media = "all";
                var ul = document.getElementsByTagName("head")[0].appendChild(oLi)
            }
        })
    </script> -->
    <style>
        .layui-btn+.layui-btn {
            margin-left: 0px;
        }
    </style>
</head>

<body>
    <span class="layui-breadcrumb">
        <a href="#">首页</a>
        <a href="#">表单布局</a>
        <a><cite>常用的表单样式</cite></a>
    </span>
    <!-- 常用的表单样式 -->
    <div class="layui-card tab_form_card layui-form forceForm-item ">
        <div class="layui-card-header">
            <h3 name="guid">常用的表单样式</h3>
        </div>
        <div class="layui-card-body" pad15>
            <form class="layui-form" lay-filter="form-body">
                <div class="layui-form-item">
                    <div class="layui-row myrow_item">


                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label from-lable">
                                    时间多选
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" id="DateTime2" name="DateTime2" laydatetime placeholder="请输入更新时间"
                                        autocomplete="off" class="layui-input">
                                    <input type="text" id="DateTime" name="DateTime" laydatetime placeholder="请输入更新时间"
                                        autocomplete="off" class="layui-input"
                                        style="position: absolute; top: 0; opacity: 0;">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" lay-submit lay-filter="setmypass">确认修改</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <script src="../../js/jquery.3.5.1.js"></script>
    <script src="../../js/select2.js"></script>
    <script src="../../layuiadmin/layui/layui.js"></script>
    <script src="../../layuiadmin/modules/layui_ext.js"></script>
    <script>
        layui.config({
            base: '../../layuiadmin/'
        }).extend({
            index: 'lib/index', //主入口模块
            select2: 'modules/select2',  
            timemsg: 'modules/timemsg',  
        }).use(['jquery', 'form', 'laydate', 'element', 'select2', 'timemsg'], function () {
            var $ = layui.jquery
            var form = layui.form
            var laydate = layui.laydate
            var select2 = layui.select2

            $("#DateTime2").click(function () { $("#DateTime") })

            // 初始化select2
            var date_ = laydate.render({	// 自定义时间多选
                elem: '#DateTime', //指定元素,这是选择时间的目标元素
                elemTag: $('#DateTime2'), // 这是展示多时间的元素，因为layui的时间不能多选，所有就使用了迂回的方式。
                type: 'datetime',
                format: 'yyyy-MM-dd',
                multipleDate: '',   // 保存多个时间的字符串
                ready: function (data) {    // 打开时间控件的触发方法
                    $(".layui-laydate-hint").remove();
                    var elem = this.elem[0]
                    elem.value = $(this.elemTag).val()  // 注意：这里的绑定元素为表单元素，所以可以使用elem.value获取值。
                    console.log('ready',)
                    this.init()
                }, change: function (value, date, endDate) {
                    var elem = this.elem[0]
                    console.log('change', this, value, date, endDate)
                    var split = "-";
                    var dd = date.year + split + date.month + split + date.date;
                    if (this.elemTag.val().indexOf(dd) != -1) {
                        this.elemTag.val(this.elemTag.val().replace(dd + ';', ''))
                    } else {
                        this.elemTag.val(this.elemTag.val() + dd + ';')
                    }

                    this.init()
                }, done: function (value, date, endDate) {
                    var elem = this.elem[0]
                    console.log('done-------------',)
                    console.log(this, value, date, endDate)
                },
                init: function () { // 初始化，让多选时间改变背景色
                    var elelDateTd = $(".layui-laydate-content").find("td");
                    var dates = this.elemTag.val().split(";")
                    elelDateTd.each(function (index, __item) {
                        var td = $(__item);
                        dates.forEach(function (item) {
                            if (!item) return;
                            if (td.attr("lay-ymd") == item)
                                td.addClass("layui-this my")
                            else
                                if (!td.hasClass("layui-this my"))
                                    td.removeClass("layui-this")
                        })
                    })
                }
            })


            window.date = date_;

        })
    </script>
</body>

</html>